<template>
  <div>
    <h1 style="text-align: center;">项目管理</h1>
    <div>
      <el-input v-model="keyword" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="getProjectInfoList">搜索</el-button>
      <el-button type="primary" @click="dialogVisible=true">新建项目</el-button>
    </div>
    <div class="wrapper">
      <el-table :data="tableData" style="width: 100%;overflow: auto; ">
        <!-- <el-table-column type="selection" width="55">
        </el-table-column> -->
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="project_name" label="项目名称" align="center">
        </el-table-column>
        <el-table-column prop="well_names" label="井名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="create_date" label="创建时间"  align="center">
        </el-table-column>
        <el-table-column prop="update_date" label="更新时间" align="center">
        </el-table-column>
        <el-table-column prop="createby" label="创建人" align="center">
        </el-table-column>
        <el-table-column prop="updateby" label="更新人" align="center">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="info" icon="el-icon-edit" size="small" @click="updateProject(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteProject(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <MyPagination :currentPage="currentPage" :pageSize="pageSize" :total="total" @newValue="handleSizeChange"
                    @newCurrentPage="handleCurrentChange"/>
    </div>
    <el-dialog
        title="新建项目"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="demo-ruleForm">
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="form.projectName" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="井名称" prop="wellName">
          <!--这个井是个下拉框，下拉框的内容从后端获取-->
          <el-select v-model="form.well_id" multiple placeholder="请选择井名称">
            <!-- 可以暂时选择无井-->
            <el-option
                label="无"
                value=""
            />
            <el-option
                v-for="item in wellList"
                :key="item.id"
                :label="item.well_name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addProject()">确 定</el-button>
  </span>
    </el-dialog>
    <UpdateProject ref="updateProjectRef" @updateProjectSuccess="getProjectInfoList"/>
  </div>
</template>
<script>

import MyPagination from "@/components/MyPagination.vue";
import UpdateProject from "@/components/project/UpdateProject.vue";
import api from "@/api/api.js";

export default {
  components: {MyPagination, UpdateProject},
  data() {
    return {
      dialogVisible: false,
      form: {
        projectName: '',
        well_id: [],
        n: '',
        vp: '',
        vs: '',
        ucs: '',
        o: '',
      },
      keyword: '',
      wellList: [],
      tableData: [],
      //分页查询参数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 数据总条数
      rules: {
        projectName: [
          {required: true, message: '请输入项目名称', trigger: 'blur'}
        ],
        wellName: [
          {required: true, message: '请输入井名称', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            //清空数据
            this.form.projectName = '';
            this.form.n = '';
            this.form.vp = '';
            this.form.vs = '';
            this.form.ucs = '';
            this.form.o = '';
            this.form.well_id = [];
            done();
          })
          .catch(() => {
          });
    },
    handleSizeChange(a, b) {
      // this.pageSize = val; // 改变每页显示的条数
      // this.currentPage = 1; // 重置当前页为第一页
      this.currentPage = b, // 当前页码
          this.pageSize = a // 每页显示条数

    },
    handleCurrentChange(c) {
      // this.currentPage = val; // 改变当前页码
      console.log('当前页码:', c);
      this.currentPage = c // 当前页码
      // getZndbList(this.currentPage)
    },
    //获取所有井的数据
    getWellInfoList() {
      const map = {
        currentPage: this.currentPage,
        keyword: "",
      }
      api.post("/wellInfo/getWellInfoList", map).then(res => {
        this.wellList = res.data.wellInfoList;
        console.log(res);
      })
    },
    //   获取所有的项目数据
    getProjectInfoList() {
      const map = {
        currentPage: this.currentPage,
        keyword: this.keyword,
      }
      api.post("/project/getProjectList", map).then(res => {
        this.tableData = res.data.projectList;
        this.total = res.data.total;
        console.log(res);
      })
    },
    // 添加项目
    addProject() {
      const map = {
        project_name: this.form.projectName,
        well_id: this.form.well_id,
        n: this.form.n,
        vp: this.form.vp,
        vs: this.form.vs,
        ucs: this.form.ucs,
        o: this.form.o,
      }
      api.post("/project/addProject", map).then(res => {
        this.getProjectInfoList();
        this.dialogVisible = false;
        this.form.projectName = '';
        this.form.wellName = '';
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        //清空数据
        this.form.projectName = '';
        this.form.n = '';
        this.form.vp = '';
        this.form.vs = '';
        this.form.ucs = '';
        this.form.o = '';
        this.form.well_id = [];
      }).catch(err => {
        this.$message({
          message: err.message,
          type: 'error'
        })
      })
    },
    // 更新项目
    updateProject(row) {
      this.$refs.updateProjectRef.dialogVisible = true;
      this.$refs.updateProjectRef.form = row;
      if (row.well_ids != null) {
        this.$refs.updateProjectRef.form.well_ids = row.well_ids.filter(id => id !== null && id !== '{NULL}');
      }
      this.$refs.updateProjectRef.wellList = this.wellList;
    },
    // 删除项目
    deleteProject(id) {
      const map = {
        project_id: id,
      }
      //确定删除吗?
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.post("/project/deleteProject", map).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getProjectInfoList();
        }).catch(err => {
          this.$message({
            message: err.message,
            type: 'error'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  created() {
    this.getWellInfoList();
    this.getProjectInfoList();
  }
}
</script>

<style scoped lang="less">

</style>